<template>
  <div class="mobile-approval-page">
    <div class="page-header">
      <h2>移动审批工作流</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showApprovalDialog = true">发起审批</el-button>
        <el-button icon="Setting">流程配置</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><DocumentChecked /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.pendingApprovals }}</div>
            <div class="stat-label">待我审批</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><Edit /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.myApprovals }}</div>
            <div class="stat-label">我的申请</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.approvedCount }}</div>
            <div class="stat-label">已审批</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Close /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.rejectedCount }}</div>
            <div class="stat-label">已驳回</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主内容 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 待我审批 -->
        <el-tab-pane label="待我审批" name="pending">
          <el-table :data="pendingList" stripe>
            <el-table-column prop="approvalNo" label="审批编号" width="150" />
            <el-table-column prop="approvalType" label="审批类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getApprovalTypeText(row.approvalType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip />
            <el-table-column prop="applicant" label="申请人" width="100" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="submitTime" label="提交时间" width="180" />
            <el-table-column prop="urgency" label="紧急程度" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getUrgencyType(row.urgency)">{{ row.urgency }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
                <el-button link type="success" @click="approveItem(row)">同意</el-button>
                <el-button link type="danger" @click="rejectItem(row)">驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 我的申请 -->
        <el-tab-pane label="我的申请" name="mine">
          <el-table :data="myApprovalList" stripe>
            <el-table-column prop="approvalNo" label="审批编号" width="150" />
            <el-table-column prop="approvalType" label="审批类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getApprovalTypeText(row.approvalType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip />
            <el-table-column prop="submitTime" label="提交时间" width="180" />
            <el-table-column prop="currentApprover" label="当前审批人" width="120" />
            <el-table-column prop="status" label="状态" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewProgress(row)">进度</el-button>
                <el-button link type="warning" @click="urgeApproval(row)">催办</el-button>
                <el-button link type="danger" @click="revokeApproval(row)">撤回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 已审批 -->
        <el-tab-pane label="已审批" name="approved">
          <el-table :data="approvedList" stripe>
            <el-table-column prop="approvalNo" label="审批编号" width="150" />
            <el-table-column prop="approvalType" label="审批类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getApprovalTypeText(row.approvalType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip />
            <el-table-column prop="applicant" label="申请人" width="100" />
            <el-table-column prop="approvalTime" label="审批时间" width="180" />
            <el-table-column prop="myOpinion" label="我的意见" width="150" show-overflow-tooltip />
            <el-table-column prop="result" label="审批结果" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.result === '同意' ? 'success' : 'danger'">
                  {{ row.result }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 流程模板 -->
        <el-tab-pane label="流程模板" name="templates">
          <el-button type="primary" icon="Plus" @click="showTemplateDialog = true" style="margin-bottom: 15px">
            添加模板
          </el-button>

          <el-table :data="templateList" stripe>
            <el-table-column prop="templateName" label="模板名称" width="200" />
            <el-table-column prop="templateType" label="模板类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getApprovalTypeText(row.templateType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
            <el-table-column prop="approvalSteps" label="审批环节" width="100" align="center" />
            <el-table-column prop="usageCount" label="使用次数" width="100" align="center" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.status === '启用' ? 'success' : 'info'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewFlow(row)">流程图</el-button>
                <el-button link type="success" @click="useTemplate(row)">使用</el-button>
                <el-button link type="warning" @click="editTemplate(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 发起审批对话框 -->
    <el-dialog v-model="showApprovalDialog" title="发起审批" width="700px">
      <el-form :model="approvalForm" :rules="rules" ref="approvalFormRef" label-width="100px">
        <el-form-item label="审批类型" prop="approvalType">
          <el-select v-model="approvalForm.approvalType" placeholder="请选择类型">
            <el-option label="请假申请" value="leave" />
            <el-option label="报销申请" value="expense" />
            <el-option label="采购申请" value="purchase" />
            <el-option label="用章申请" value="seal" />
            <el-option label="出差申请" value="travel" />
            <el-option label="加班申请" value="overtime" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="approvalForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="紧急程度">
          <el-radio-group v-model="approvalForm.urgency">
            <el-radio label="normal">普通</el-radio>
            <el-radio label="urgent">紧急</el-radio>
            <el-radio label="very_urgent">非常紧急</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详细说明" prop="content">
          <el-input
            v-model="approvalForm.content"
            type="textarea"
            :rows="5"
            placeholder="请输入详细说明"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="approvalForm.fileList"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持pdf、doc、jpg、png格式，单个文件不超过10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="抄送人">
          <el-select v-model="approvalForm.ccList" placeholder="请选择抄送人" multiple>
            <el-option label="张三" value="zhangsan" />
            <el-option label="李四" value="lisi" />
            <el-option label="王五" value="wangwu" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showApprovalDialog = false">取消</el-button>
        <el-button type="primary" @click="handleApprovalSubmit">提交审批</el-button>
      </template>
    </el-dialog>

    <!-- 添加模板对话框 -->
    <el-dialog v-model="showTemplateDialog" title="添加流程模板" width="800px">
      <el-form :model="templateForm" label-width="100px">
        <el-form-item label="模板名称">
          <el-input v-model="templateForm.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select v-model="templateForm.templateType" placeholder="请选择类型">
            <el-option label="请假申请" value="leave" />
            <el-option label="报销申请" value="expense" />
            <el-option label="采购申请" value="purchase" />
            <el-option label="用章申请" value="seal" />
            <el-option label="出差申请" value="travel" />
            <el-option label="加班申请" value="overtime" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板说明">
          <el-input
            v-model="templateForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入模板说明"
          />
        </el-form-item>
        <el-form-item label="审批流程">
          <div class="flow-builder">
            <el-steps :active="templateForm.steps.length" align-center>
              <el-step
                v-for="(step, index) in templateForm.steps"
                :key="index"
                :title="step.title"
                :description="step.approver"
              />
            </el-steps>
            <el-button type="primary" size="small" style="margin-top: 15px" @click="addStep">
              添加审批环节
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showTemplateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleTemplateSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  pendingApprovals: 8,
  myApprovals: 15,
  approvedCount: 256,
  rejectedCount: 12
})

// 当前标签页
const activeTab = ref('pending')

// 待审批列表
const pendingList = ref([
  {
    id: 1,
    approvalNo: 'APP202501001',
    approvalType: 'leave',
    title: '年假申请-3天',
    applicant: '张三',
    department: '销售部',
    submitTime: '2025-01-12 14:30',
    urgency: '普通'
  },
  {
    id: 2,
    approvalNo: 'APP202501002',
    approvalType: 'expense',
    title: '差旅费报销',
    applicant: '李四',
    department: '市场部',
    submitTime: '2025-01-11 10:00',
    urgency: '紧急'
  }
])

// 我的申请列表
const myApprovalList = ref([
  {
    id: 1,
    approvalNo: 'APP202501003',
    approvalType: 'purchase',
    title: '办公设备采购申请',
    submitTime: '2025-01-10 09:00',
    currentApprover: '李经理',
    status: '审批中'
  },
  {
    id: 2,
    approvalNo: 'APP202501004',
    approvalType: 'seal',
    title: '合同用章申请',
    submitTime: '2025-01-09 15:30',
    currentApprover: '王总',
    status: '审批中'
  }
])

// 已审批列表
const approvedList = ref([
  {
    id: 1,
    approvalNo: 'APP202501005',
    approvalType: 'leave',
    title: '病假申请',
    applicant: '王五',
    approvalTime: '2025-01-08 16:45',
    myOpinion: '同意请假',
    result: '同意'
  },
  {
    id: 2,
    approvalNo: 'APP202501006',
    approvalType: 'expense',
    title: '招待费报销',
    applicant: '赵六',
    approvalTime: '2025-01-07 11:20',
    myOpinion: '金额过高，需重新核实',
    result: '驳回'
  }
])

// 模板列表
const templateList = ref([
  {
    id: 1,
    templateName: '请假审批流程',
    templateType: 'leave',
    description: '适用于员工请假申请',
    approvalSteps: 3,
    usageCount: 586,
    status: '启用'
  },
  {
    id: 2,
    templateName: '报销审批流程',
    templateType: 'expense',
    description: '适用于各类费用报销',
    approvalSteps: 4,
    usageCount: 432,
    status: '启用'
  }
])

// 对话框
const showApprovalDialog = ref(false)
const showTemplateDialog = ref(false)
const approvalFormRef = ref(null)

// 表单
const approvalForm = reactive({
  approvalType: '',
  title: '',
  urgency: 'normal',
  content: '',
  fileList: [],
  ccList: []
})

const templateForm = reactive({
  templateName: '',
  templateType: '',
  description: '',
  steps: [
    { title: '直属主管审批', approver: '部门经理' },
    { title: '部门总监审批', approver: '部门总监' }
  ]
})

// 表单验证规则
const rules = {
  approvalType: [{ required: true, message: '请选择审批类型', trigger: 'change' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入详细说明', trigger: 'blur' }]
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 方法
const getApprovalTypeText = (type) => {
  const types = {
    leave: '请假申请',
    expense: '报销申请',
    purchase: '采购申请',
    seal: '用章申请',
    travel: '出差申请',
    overtime: '加班申请'
  }
  return types[type] || type
}

const getUrgencyType = (urgency) => {
  const types = {
    '普通': 'info',
    '紧急': 'warning',
    '非常紧急': 'danger'
  }
  return types[urgency] || 'info'
}

const getStatusType = (status) => {
  const types = {
    '审批中': 'warning',
    '已通过': 'success',
    '已驳回': 'danger',
    '已撤回': 'info'
  }
  return types[status] || 'info'
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const viewDetail = (row) => {
  console.log('查看详情', row)
  ElMessage.info('查看审批详情')
}

const approveItem = (row) => {
  ElMessageBox.prompt('请输入审批意见', '审批', {
    confirmButtonText: '同意',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    console.log('审批意见', value)
    ElMessage.success('审批通过')
  }).catch(() => {})
}

const rejectItem = (row) => {
  ElMessageBox.prompt('请输入驳回原因', '驳回', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '驳回原因不能为空'
  }).then(({ value }) => {
    console.log('驳回原因', value)
    ElMessage.success('已驳回')
  }).catch(() => {})
}

const viewProgress = (row) => {
  console.log('查看进度', row)
  ElMessage.info('查看审批进度')
}

const urgeApproval = (row) => {
  console.log('催办', row)
  ElMessage.success('催办消息已发送')
}

const revokeApproval = (row) => {
  ElMessageBox.confirm('确定要撤回该审批吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('已撤回')
  }).catch(() => {})
}

const viewFlow = (row) => {
  console.log('查看流程图', row)
  ElMessage.info('查看流程图')
}

const useTemplate = (row) => {
  console.log('使用模板', row)
  showApprovalDialog.value = true
}

const editTemplate = (row) => {
  Object.assign(templateForm, row)
  showTemplateDialog.value = true
}

const handlePreview = (file) => {
  console.log('预览文件', file)
}

const handleRemove = (file, fileList) => {
  console.log('删除文件', file, fileList)
}

const addStep = () => {
  templateForm.steps.push({
    title: '审批环节' + (templateForm.steps.length + 1),
    approver: '审批人'
  })
}

const handleApprovalSubmit = () => {
  approvalFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交审批', approvalForm)
      ElMessage.success('审批已提交')
      showApprovalDialog.value = false
    }
  })
}

const handleTemplateSubmit = () => {
  console.log('提交模板', templateForm)
  ElMessage.success('模板添加成功')
  showTemplateDialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.mobile-approval-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.main-card {
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.flow-builder {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;

  :deep(.el-step__title) {
    font-size: 14px;
  }
}

.upload-demo {
  :deep(.el-upload__tip) {
    margin-top: 5px;
    color: #909399;
    font-size: 12px;
  }
}
</style>

